<!-- Main Menu -->
<div id="main-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <!-- responsive navigation -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-bars"></i>
            </button> <!-- /.navbar-toggle -->
            <!-- Logo -->
            <a class="navbar-brand" href="index.html">
                <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/logo.png" alt="Biz HTML Template"/>
            </a><!-- /.navbar-brand -->
        </div> <!-- /.navbar-header -->

        <nav class="collapse navbar-collapse">
            <!-- Main navigation -->
            <ul id="headernavigation" class="nav navbar-nav pull-right">
                <li class="active"><a href="#page-top">Home</a></li>
                <li><a href="#service">Service</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#testimonial">Testimonial</a></li>
                <li><a href="#about-us">About</a></li>
                <li><a href="#recent-post">Blog</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul> <!-- /.nav .navbar-nav -->
        </nav> <!-- /.navbar-collapse  -->
    </div> <!-- /.container -->
</div><!-- /#main-menu -->
<!-- Main Menu End -->


<!-- Main Slider -->
<section id="main-slider" class="main-slide-wraper carousel slide" data-ride="carousel">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item ">
            <div id="slide-item-1" class="main-slider-bg  slide-element">
                <div class="bg-pattern main-slider-bg">
                    <div class="light-dark-transparent-bg main-slider-bg">
                        <div class="container">
                            <div class="slider-content text-center">
                                <ul class="list-inline list-text">
                                    <li>Designing</li>
                                    <li>
                                        <span class="xs-hex"></span>
                                    </li>
                                    <li>Developing</li>
                                    <li><span class="xs-hex"></span></li>
                                    <li>Branding</li>
                                </ul><!-- /.list-text -->
                                <h2 class="slide-heading">
                                    <span class="bold-font">Welcome</span> to Creative <span class="bold-font">Biz</span>
                                </h2><!-- /.slide-heading -->
                                <p><a href="#" class="btn read-more">Learn more</a></p>
                            </div><!-- /.slider-content -->
                        </div> <!-- /.slide-element -->
                    </div><!-- /.light-dark-transparent-bg -->
                </div><!-- /.bg-pattern  -->
            </div><!-- /.main-slider-bg --> 
        </div><!--/.active /.item -->

        <div class="item ">
            <div id="slide-item-2" class="main-slider-bg  slide-element">
                <div class="bg-pattern main-slider-bg">
                    <div class="light-dark-transparent-bg main-slider-bg">
                        <div class="container">
                            <div class="slider-content text-center">
                                <ul class="list-inline list-text">
                                    <li>Designing</li>
                                    <li>
                                        <span class="xs-hex"></span>
                                    </li>
                                    <li>Developing</li>
                                    <li><span class="xs-hex"></span></li>
                                    <li>Branding</li>
                                </ul><!-- /.list-text -->
                                <h2 class="slide-heading">
                                    <span class="bold-font">A Premium</span> HTML5 <span class="bold-font">Template</span>
                                </h2><!-- /.slide-heading -->
                                <p><a href="#" class="btn read-more">Learn more</a></p>
                            </div><!-- /.slider-content -->
                        </div> <!-- /.slide-element -->
                    </div><!-- /.light-dark-transparent-bg -->
                </div><!-- /.bg-pattern  -->
            </div><!-- /.main-slider-bg --> 
        </div><!--/.active /.item -->
    </div><!-- /.carousel-inner -->

    <!-- slider nav -->
    <a class="slide-nav left" href="#main-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a>
    <a class="slide-nav right" href="#main-slider" data-slide="next"><i class="fa fa-angle-right"></i></a>

    <div class="next-section" id="next-section">
        <img class="scrollfeature" src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/down-angle.png" alt="go down">
    </div><!-- /.next-section -->	

</section><!-- /#main-slider -->
<!-- Main Slider End -->




<!-- Feature Section -->
<section id="feature" class="feature mini-height">
    <div class="container">
        <div class="row">

            <div id="feature-1" class="col-xs-6 col-md-4 col-lg-4  element-from-left">
                <div class="feature-hex ">
                    <div class="feature-hex-in light-blue">
                        <div class="feature-icon">
                            <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/feature-icon/solid-coding.png" alt="feature icon">
                        </div><!-- /.feature-icon -->
                        <h3 class="feature-title">Solid Coding</h3>
                        <p class="fearure-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                    </div> <!-- /.feature-hex-in -->
                </div><!-- /.feature-hex -->
            </div><!-- /#feature-1 -->

            <div id="feature-2" class="col-xs-6 col-md-4 col-lg-4 element-from-bottom">
                <div class="feature-hex">
                    <div class="feature-hex-in light-red">
                        <div class="feature-icon"><img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/feature-icon/Responsive.png" alt="feature icon"></div>
                        <h3 class="feature-title">Responsive</h3>
                        <p class="fearure-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div> <!-- /.feature-hex-in -->
                </div><!-- /.feature-hex -->
            </div><!-- /#feature-2 -->

            <div id="feature-3" class="col-xs-6 col-md-4 col-lg-4 element-from-right">
                <div class="feature-hex">
                    <div class="feature-hex-in light-blue">
                        <div class="feature-icon">
                            <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/feature-icon/Customizable.png" alt="feature icon">
                        </div><!-- /.feature-icon -->
                        <h3 class="feature-title">Customizable</h3>
                        <p class="fearure-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                    </div> <!-- /.feature-hex-in -->
                </div><!-- /.feature-hex -->
            </div><!-- /#feature-3 -->

        </div> <!-- /.row -->
    </div><!-- /.container -->
</section> <!-- /#feature -->
<!-- Feature Section End-->


<!-- Service Section -->
<section id="service" class="section-gray-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 element-from-top">
                <h2 class="section-title">Services</h2>
                <div class="section-title-bottom">
                    <span class="section-title-bottom-inner blue-border"></span>
                </div><!-- /.section-title-bottom -->
                <p class="section-description text-center">
                    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                </p>
            </div><!-- /.col-lg-12 -->

            <div class="service">

                <div class="service-box col-xs-6 col-md-4 col-lg-4 element-from-left">
                    <div class="service-icon">
                        <i class="fa fa-lightbulb-o"></i>
                    </div><!-- /.service-icon -->
                    <h4 class="service-title "><a href="#">Web Design</a></h4>
                    <p class="service-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, dolore, dolorum, qui ducimus
                    </p><!-- /.service-text -->
                </div><!-- /.service-box -->

                <div class="service-box col-xs-6 col-md-4 col-lg-4 element-from-right">
                    <div class="service-icon">
                        <i class="fa fa-flask"></i>
                    </div><!-- /.service-icon -->
                    <h4 class="service-title "><a href="#">Web Development</a></h4>
                    <p class="service-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, dolore, dolorum, qui ducimus
                    </p><!-- /.service-text -->
                </div><!-- /.service-box -->

                <div class="service-box col-xs-6 col-md-4 col-lg-4 element-from-left">
                    <div class="service-icon">
                        <i class="fa fa-tachometer"></i>
                    </div><!-- /.service-icon -->
                    <h4 class="service-title "><a href="#">SEO Ready</a></h4>
                    <p class="service-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, dolore, dolorum, qui ducimus
                    </p><!-- /.service-text -->
                </div><!-- /.service-box -->

                <div class="service-box col-xs-6 col-md-4 col-lg-4 element-from-right">
                    <div class="service-icon">
                        <i class="fa fa-rocket"></i>
                    </div><!-- /.service-icon -->
                    <h4 class="service-title "><a href="#">Branding</a></h4>
                    <p class="service-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, dolore, dolorum, qui ducimus
                    </p><!-- /.service-text -->
                </div><!-- /.service-box -->

                <div class="service-box col-xs-6 col-md-4 col-lg-4 element-from-bottom">
                    <div class="service-icon">
                        <i class="fa fa-puzzle-piece"></i>
                    </div><!-- /.service-icon -->
                    <h4 class="service-title "><a href="#">Email Marketing</a></h4>
                    <p class="service-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, dolore, dolorum, qui ducimus
                    </p><!-- /.service-text -->
                </div><!-- /.service-box -->

                <div class="service-box col-xs-6 col-md-4 col-lg-4 element-from-top">
                    <div class="service-icon">
                        <i class="fa fa-video-camera"></i>
                    </div><!-- /.service-icon -->
                    <h4 class="service-title"><a href="#">Video Support</a></h4>
                    <p class="service-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, dolore, dolorum, qui ducimus
                    </p><!-- /.service-text -->
                </div><!-- /.service-box -->

            </div><!-- /.service -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</section> <!-- /#service -->
<!-- Service Section End-->




<!-- Quality Section -->
<section id="quality" class="parallax-style">
    <div class="parallax-overlay">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 element-from-top">
                    <h2 class="section-title plx-section-title">We Value the Quality First</h2>
                    <div class="section-title-bottom">
                        <span class="section-title-bottom-inner"></span>
                    </div><!-- /.section-title-bottom -->
                    <p class="section-description text-center plx-section-description">
                        Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                    </p><!-- /.section-description -->
                    <p class="text-center">
                        <a href="#" class="btn read-more">Buy Theme</a>
                    </p>
                    <div class="quality-product-img">
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/quality/monitor-display.png" alt="Quality Products">
                    </div><!-- /.quality-product-img -->
                </div><!-- /.col-lg-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /.parallax-overlay -->

</section> <!-- /#quality -->
<!-- Quality Section End-->



<!-- Portfolio Section -->
<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="col-lg-12 element-from-top">
            <h2 class="section-title">Portfolio</h2>
            <div class="section-title-bottom">
                <span class="section-title-bottom-inner blue-border"></span>
            </div><!-- /.section-title-bottom -->
            <p class="section-description text-center">
                Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
            </p>
        </div><!-- /.col-lg-12 -->

        <div id="portfolio-container" class="clearfix">
            <div class="portfolioFilter">
                <a href="#" data-filter="" class="current">All</a>
                <a href="#" data-filter=".cat-1">Branding</a>
                <a href="#" data-filter=".cat-2">Web Designing </a>
                <a href="#" data-filter=".cat-3">Photoshop</a>
                <a href="#" data-filter=".cat-4">Video</a>
            </div> <!-- /.portfolioFilter -->

            <div class="portfolio-item element-from-bottom">
                <figure class="item cat-3 cat-4">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330.jpg" alt="Item 3"/>
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal">
                        <span class="portfolio-hover-hex"><i class="fa fa-link"></i></span>
                    </a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>
                <figure class="item cat-2">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_02.jpg" alt="Item 4" />
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal"><span class="portfolio-hover-hex"><i class="fa fa-link"></i></span></a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_02.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>
                <figure class="item item-w2 cat-1 cat-2">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/960x330.jpg" alt="Item 1" />
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal"><span class="portfolio-hover-hex"><i class="fa fa-link"></i></span></a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/960x330.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>
                <figure class="item item-h2 cat-1">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x680.jpg" alt="Item 2" />
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal"><span class="portfolio-hover-hex"><i class="fa fa-link"></i></span></a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x680.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>

                <figure class="item cat-3 cat-1">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_03.jpg" alt="Item 5" />
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal"><span class="portfolio-hover-hex"><i class="fa fa-link"></i></span></a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_03.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>
                <figure class="item cat-4">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_04.jpg" alt="Item 6" />
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal"><span class="portfolio-hover-hex"><i class="fa fa-link"></i></span></a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_04.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>
                <figure class="item cat-3 cat-1 cat-4">
                    <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_05.jpg" alt="Item 7" />
                    <a href="#protfolio-container" class="portfolio-btn-1" data-toggle="modal" data-target="#myModal"><span class="portfolio-hover-hex"><i class="fa fa-link"></i></span></a>
                    <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_05.jpg" data-rel="prettyPhoto" class="portfolio-btn-2"><span class="portfolio-hover-hex"><i class="fa fa-search-plus"></i></span></a>
                </figure>
            </div>
        </div><!-- /#portfolio-container -->



        <!-- BootStrap Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 class="modal-title" id="myModalLabel">Portfolio title</h3>
                    </div>
                    <div class="modal-body">

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, quod porro ducimus natus eius blanditiis! Nisi, magni, mollitia quam alias doloremque delectus eaque repellat temporibus! Officia, autem sunt optio laboriosam.
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/portfolio/475x330_05.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container -->
</section> <!-- /#portfolio -->
<!-- Portfolio Section End -->



<!-- Testimonial Section -->
<section id="testimonial">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 element-from-top">
                <h2 class="section-title">Testimonials</h2>
                <div class="section-title-bottom">
                    <span class="section-title-bottom-inner blue-border"></span>
                </div><!-- /.section-title-bottom -->
                <p class="section-description text-center">
                    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                </p>
            </div><!-- /.col-lg-12 -->

            <div id="client-slider" class="owl-carousel owl-theme">
                <div class="item element-from-right">
                    <div class="media">
                        <div class="pull-left">
                            <div class="client-img-container">
                                <div class="client-img-hex">
                                    <div class="client-img-hex1 client-img-hex2">
                                        <div class="client-img-hex-in1">
                                            <div id="clinet-img-1" class="client-img-hex-in2"></div>
                                        </div>
                                    </div>
                                </div><!-- /.client-img-hex -->
                            </div><!-- /.client-img-container -->
                        </div><!-- /.pull-left -->

                        <div class="media-body">
                            <div class="client-review">
                                <h4 class="media-heading client-name-title">
                                    Max Clark <span> | </span><span>CEO of Web Biz</span>
                                </h4><!-- /.client-name-title -->
                                <p class="client-message">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, voluptate, repudiandae, qutemporibus id in aut quis blanditiis 
                                </p><!-- /.client-message -->

                            </div><!--  /.client-review -->
                        </div><!-- /.media-body -->
                    </div> <!-- /.media -->
                </div> <!-- /.item -->


                <div class="item element-from-left">
                    <div class="media">
                        <div class="pull-left">
                            <div class="client-img-container">
                                <div class="client-img-hex">
                                    <div class="client-img-hex1 client-img-hex2">
                                        <div class="client-img-hex-in1">
                                            <div id="clinet-img-2" class="client-img-hex-in2"></div>
                                        </div>
                                    </div>
                                </div><!-- /.client-img-hex -->
                            </div><!-- /.client-img-container -->
                        </div><!-- /.pull-left -->

                        <div class="media-body">
                            <div class="client-review">
                                <h4 class="media-heading client-name-title">
                                    Selena Spear<span> | </span><span>CEO of Web Biz</span>
                                </h4><!-- /.client-name-title -->
                                <p class="client-message">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, voluptate, repudiandae, qui temporibus id in aut quis blanditiis 
                                </p><!-- /.client-message -->

                            </div><!--  /.client-review -->
                        </div><!-- /.media-body -->
                    </div> <!-- /.media -->
                </div> <!-- /.item -->


                <div class="item">
                    <div class="media">
                        <div class="pull-left">
                            <div class="client-img-container">
                                <div class="client-img-hex">
                                    <div class="client-img-hex1 client-img-hex2">
                                        <div class="client-img-hex-in1">
                                            <div  id="clinet-img-3"  class="client-img-hex-in2"></div>
                                        </div>
                                    </div>
                                </div><!-- /.client-img-hex -->
                            </div><!-- /.client-img-container -->
                        </div><!-- /.pull-left -->

                        <div class="media-body">
                            <div class="client-review">
                                <h4 class="media-heading client-name-title">
                                    Melina Springer<span> | </span><span>CEO of Web Biz</span>
                                </h4><!-- /.client-name-title -->
                                <p class="client-message">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, voluptate, repudiandae, qui temporibus id in aut quis blanditiis 
                                </p><!-- /.client-message -->

                            </div><!--  /.client-review -->
                        </div><!-- /.media-body -->
                    </div> <!-- /.media -->
                </div> <!-- /.item -->


                <div class="item">
                    <div class="media">
                        <div class="pull-left">
                            <div class="client-img-container">
                                <div class="client-img-hex">
                                    <div class="client-img-hex1 client-img-hex2">
                                        <div class="client-img-hex-in1">
                                            <div id="clinet-img-4" class="client-img-hex-in2"></div>
                                        </div>
                                    </div>
                                </div><!-- /.client-img-hex -->
                            </div><!-- /.client-img-container -->
                        </div><!-- /.pull-left -->

                        <div class="media-body">
                            <div class="client-review">
                                <h4 class="media-heading client-name-title">
                                    Micle Wolf <span> | </span><span>CEO of Web Biz</span>
                                </h4><!-- /.client-name-title -->
                                <p class="client-message">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, voluptate, repudiandae, qui temporibus id in aut quis blanditiis 
                                </p><!-- /.client-message -->

                            </div><!--  /.client-review -->
                        </div><!-- /.media-body -->
                    </div> <!-- /.media -->
                </div> <!-- /.item -->

            </div><!--  /#client-slider -->


            <div class="client-slide-navigator clearfix customNavigation">
                <a class="slide-nav-hex client-prev" href="#client-slider" data-slide="prev">
                    <span class="small-hex-btn">
                        <span><i class="fa fa-angle-left"></i></span>
                    </span>
                </a><!-- /.left -->
                <a class="slide-nav-hex client-next" href="#client-slider" data-slide="next">
                    <span class="small-hex-btn">
                        <span><i class="fa fa-angle-right"></i></span>
                    </span>
                </a><!-- /.right -->
            </div><!-- /.client-slide-navigator -->


        </div><!-- /.row -->
    </div><!-- /.container -->
</section><!-- /#testimonial -->	
<!-- Testimonial Section End  -->



<!-- Sponsor  Section -->
<section id="sponsor" class="clearfix">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-lg-3 element-from-left">
                <div class="sponsor-logo">
                    <a href="#"><img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/client-logo/logo-audiojungle.png" alt="Logo Audiojungle"></a>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 element-from-left">
                <div class="sponsor-logo">
                    <a href="#"><img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/client-logo/logo-codecanyon.png" alt="Logo Codecanyon"></a>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 element-from-right">
                <div class="sponsor-logo">
                    <a href="#"><img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/client-logo/logo-graphicriver.png" alt="Logo Graphicriver"></a>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 element-from-right">
                <div class="sponsor-logo">
                    <a href="#"><img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/client-logo/logo-themeforest.png" alt="Logo Themeforest"></a>
                </div>
            </div>
        </div><!-- /.row -->
    </div><!-- /.container -->
</section><!-- /#sponsor  -->
<!-- Sponsor Section End -->



<!-- Interesting Facts  Section -->
<section id="review-count" class="clearfix element-from-left">
    <div class="parallax-style">
        <div class="bg-pattern">
            <div class="container">
                <div class="row">

                    <div class="col-lg-12 element-from-top">
                        <h2 class="section-title plx-section-title">Some Interesting Facts</h2>
                        <div class="section-title-bottom">
                            <span class="section-title-bottom-inner"></span>
                        </div><!-- /.section-title-bottom -->
                    </div><!-- /.col-lg-12 -->

                    <ul class="review-count-container">

                        <li class="col-sm-6 col-md-3">
                            <div class="review-count-hex">
                                <div class="review-count-hex-inner">
                                    <span class="count-icon"><i class="fa fa-coffee"></i></span>
                                    <span class="count-number counter">14214</span>
                                    <span class="count-name">Cups of Coffee</span>
                                </div>
                            </div>
                        </li>

                        <li class="col-sm-6 col-md-3">
                            <div class="review-count-hex">
                                <div class="review-count-hex-inner">
                                    <span class="count-icon"><i class="fa fa-thumbs-o-up"></i></span>
                                    <span class="count-number counter">323</span>
                                    <span class="count-name">Projects Done</span>
                                </div>
                            </div>
                        </li>

                        <li class="col-sm-6 col-md-3">
                            <div class="review-count-hex">
                                <div class="review-count-hex-inner">
                                    <span class="count-icon"><i class="fa fa-users"></i></span>
                                    <span class="count-number counter">175</span>
                                    <span class="count-name">Happy Clients</span>
                                </div>
                            </div>
                        </li>

                        <li class="col-sm-6 col-md-3">
                            <div class="review-count-hex">
                                <div class="review-count-hex-inner">
                                    <span class="count-icon"><i class="fa fa-trophy"></i></span>
                                    <span class="count-number counter">99</span>
                                    <span class="count-name">Awards Won</span>
                                </div>
                            </div>
                        </li>

                    </ul><!-- /.review-count-container -->
                </div><!-- /.row -->
            </div><!-- /.container -->
        </div><!-- /.bg-pattern -->
    </div><!-- /.parallax-style -->
</section><!-- /#review-count -->
<!--  Interesting Facts  Section  End -->




<!-- About Us -->
<section id="about-us">
    <div class="container element-from-top">
        <h2 class="section-title"> About Us </h2>
        <div class="section-title-bottom">
            <span class="section-title-bottom-inner blue-border"></span>
        </div><!-- /.section-title-bottom -->
        <p class="section-description text-center">
            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
        </p>
    </div><!-- /.container -->


    <div class="about-us-post-container">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 about-us-post">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="post-title">We Provide All Your Needs</h3>
                            <p>
                                <strong>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</strong> 
                            </p>
                            <p>									
                                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum.
                            </p>

                            <ul class="about-us-list">
                                <li class="post-item">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </li>
                                <li class="post-item">Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. </li>
                                <li class="post-item">Morbi accumsan ipsum velit nam nec tellus a odio tincidunt auctor </li>
                            </ul><!-- /.about-us-list -->
                            <div class="about-us-link">
                                <a href="#" class="btn read-more">Read More</a>
                                <a href="#" class="btn read-more">Buy Now</a>
                            </div><!-- /.about-us-link -->

                        </div><!-- /.col-md-6 -->
                        <div class="col-md-6"></div><!-- /.col-md-6 -->
                    </div><!-- /.row -->	
                </div><!-- /.col-lg-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /.about-us-post-container -->
</section><!-- /#about-us -->
<!-- About Us End -->




<!-- Recent Post Section -->
<section id="recent-post">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 element-from-top">
                <h2 class="section-title">Recent Posts</h2>
                <div class="section-title-bottom">
                    <span class="section-title-bottom-inner blue-border"></span>
                </div><!-- /.section-title-bottom -->
                <p class="section-description text-center">
                    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                </p>
            </div><!-- /.col-lg-12 -->

            <ul id="recent-post-container"> 
                <li class="col-md-4 col-sm-4 element-from-left">
                    <div class="post-content clearfix">
                        <div class="blog-img ">
                            <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/blog-img1.jpg" alt="Post Images">
                        </div> <!-- /.blog-img -->

                        <p class="post-meta">
                            <a class="post-meta-element" href="#"> <i class="fa fa-user"></i> Jon Doe</a>
                            <time class="post-meta-element" datetime="2014-03-29"><i class="fa fa-calendar-o"></i>  12 Jan, 14</time>
                            <a class="post-meta-element" href="#"><i class="fa fa-comment"></i> 23 Responds</a>
                        </p> <!-- /.post-meta -->

                        <article class="post-text">
                            <h3 class="post-title"><a href="blog-single.html">Proin gravida nibh vel velit auctor aliquet</a></h3>
                            <p> Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
                            </p>

                        </article><!-- /.post-text -->
                    </div>
                </li><!-- /.col-md-4 col-sm-4 -->

                <li class="col-md-4 col-sm-4 element-from-bottom">
                    <div class="post-content clearfix">
                        <div class="blog-img ">
                            <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/blog-img2.jpg" alt="Post Images">
                        </div> <!-- /.blog-img -->

                        <p class="post-meta">
                            <a class="post-meta-element" href="#"> <i class="fa fa-user"></i> Jon Doe</a>
                            <time class="post-meta-element" datetime="2014-03-29"><i class="fa fa-calendar-o"></i>  12 Jan, 14</time>
                            <a class="post-meta-element" href="#"><i class="fa fa-comment"></i> 23 Responds</a>
                        </p> <!-- /.post-meta -->

                        <article class="post-text">
                            <h3 class="post-title"><a href="blog-single.html">Proin gravida nibh vel velit auctor aliquet</a></h3>
                            <p> Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>	
                        </article><!-- /.post-text -->
                    </div><!-- /.post-content  -->
                </li><!-- /.col-md-4 col-sm-4 -->

                <li class="col-md-4 col-sm-4 element-from-right">
                    <div class="post-content clearfix">
                        <div class="blog-img">
                            <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/blog-img3.jpg" alt="Post Images">
                        </div> <!-- /.blog-img -->

                        <p class="post-meta">
                            <a class="post-meta-element" href="#"> <i class="fa fa-user"></i> Jon Doe</a>
                            <time class="post-meta-element" datetime="2014-03-29"><i class="fa fa-calendar-o"></i>  12 Jan, 14</time>
                            <a class="post-meta-element" href="#"><i class="fa fa-comment"></i> 23 Responds</a>
                        </p> <!-- /.post-meta -->

                        <article class="post-text">
                            <h3 class="post-title"><a href="blog-single.html">Proin gravida nibh vel velit auctor aliquet</a></h3>
                            <p> Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
                        </article><!-- /.post-text -->
                    </div><!-- /.post-content  -->
                </li><!-- /.col-md-4 col-sm-4 -->
            </ul><!-- /#recent-post-container -->

            <p class="view-all-post text-center">
                <a href="blog.html" class="btn read-more">View All Posts</a>
            </p><!-- /.view-all-post -->


        </div><!-- /.row -->
    </div><!-- /.container -->
</section><!-- /#recent-post -->
<!-- Recent Post Section -->




<!-- Team Section  -->
<section id="team" class="section-gray-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 element-from-top">
                <h2 class="section-title">Our Team</h2>
                <div class="section-title-bottom">
                    <span class="section-title-bottom-inner blue-border"></span>
                </div><!-- /.section-title-bottom -->
                <p class="section-description text-center">
                    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                </p>
            </div><!-- /.col-lg-12 -->

            <div id="team-member-slider"  class="owl-carousel owl-theme">

                <div class="item element-from-bottom-200">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-1" class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->


                        <h3 class="team-member-name">Jens Kahale</h3>
                        <p class="team-member-designation">Programmer</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 


                    </div><!-- /.team-member -->
                </div><!-- /.item -->
                <div class="item element-from-bottom-600">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-2"  class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->


                        <h3 class="team-member-name">Claudia Springer</h3>
                        <p class="team-member-designation">Designer</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 

                    </div><!-- /.team-member -->
                </div><!-- /.item -->

                <div class="item element-from-bottom-1000">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-3"  class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->




                        <h3 class="team-member-name">Kristiane</h3>
                        <p class="team-member-designation">Web Developer</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 

                    </div><!-- /.team-member -->
                </div><!-- /.item -->

                <div class="item element-from-bottom-1400">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-4"  class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->


                        <h3 class="team-member-name">Anja Umland</h3>
                        <p class="team-member-designation">HR and Help Desk</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 

                    </div><!-- /.team-member -->
                </div><!-- /.item -->

                <div class="item">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-5"  class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->


                        <h3 class="team-member-name">John Wolf</h3>
                        <p class="team-member-designation">Designer</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 

                    </div><!-- /.team-member -->
                </div><!-- /.item -->

                <div class="item">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-6"  class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->


                        <h3 class="team-member-name">Lora Springer</h3>
                        <p class="team-member-designation">Designer</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 

                    </div><!-- /.team-member -->
                </div><!-- /.item -->


                <div class="item">
                    <div class="team-member">
                        <div class="team-member-img-container">
                            <div class="team-member-img-hex">
                                <div class="team-member-img-hex1 team-member-img-hex2">
                                    <div class="team-member-img-hex-in1">
                                        <div id="team-member-img-7"  class="team-member-img-hex-in2">

                                            <div class="team-member-social-btn">
                                                <a class="facebook-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-facebook"></i></span>
                                                    </span>
                                                </a><!-- /.facebook-btn -->
                                                <a class="twitter-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-twitter"></i></span>
                                                    </span>
                                                </a><!-- /.twitter-btn -->
                                                <a class="google-plus-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-google-plus"></i></span>
                                                    </span>
                                                </a>
                                                <a class="linkedin-btn" href="#">
                                                    <span class="small-hex-btn">
                                                        <span><i class="fa fa-linkedin"></i></span>
                                                    </span>
                                                </a>
                                            </div><!--  /.team-member-social-btn -->

                                        </div><!-- /.team-member-img-hex-in2 -->
                                    </div><!-- /.team-member-img-hex-in1 -->
                                </div><!-- /.team-member-img-hex1 -->
                            </div><!-- /.team-member-img-hex -->
                        </div><!-- /.team-member-img-container -->


                        <h3 class="team-member-name">Caily Jasmin</h3>
                        <p class="team-member-designation">Designer</p>
                        <p class="team-member-description">
                            Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
                        </p><!-- /.team-member-description --> 

                    </div><!-- /.team-member -->
                </div><!-- /.item -->



            </div> <!-- /#team-member-slider -->

            <div class="client-slide-navigator customNavigation">
                <a class="slide-nav-hex team-prev" href="#team-member-slider" data-slide="prev">
                    <span class="small-hex-btn">
                        <span><i class="fa fa-angle-left"></i></span>
                    </span>
                </a><!-- /.left -->
                <a class="slide-nav-hex team-next" href="#team-member-slider" data-slide="next">
                    <span class="small-hex-btn">
                        <span><i class="fa fa-angle-right"></i></span>
                    </span>
                </a><!-- /.right -->
            </div><!-- /.client-slide-navigator -->


        </div><!-- /.row -->
    </div><!-- /.container -->
</section><!-- /#team --> 
<!-- Team Section End -->




<section id="wouter-stokkel" class="parallax-style">
    <div class="parallax-overlay">
        <div class="container text-center">
            <p>
                It’s art if can’t be explained. It’s fashion if no one asks for an explanation.
                It’s design if it doesn’t need explanation.
            </p>

            <p class="wouter-text"> -- <br> WOUTER STOKKEL</p>
        </div><!-- /.container -->
    </div><!-- /.parallax-overlay -->
</section><!-- /#wouter-stokkel -->


<!-- Pricing Section -->
<section id="pricing" class="section-gray-bg clearfix">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 element-from-top">
                <h2 class="section-title">Pricing</h2>
                <div class="section-title-bottom">
                    <span class="section-title-bottom-inner blue-border"></span>
                </div><!-- /.section-title-bottom -->
                <p class="section-description text-center">
                    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                </p>
            </div><!-- /.col-lg-12 -->


            <div class="pricing-table clearfix">
                <div class="col-xs-6 col-md-4 col-lg-4 element-from-left">
                    <div class="pricing-table-1">
                        <h3 class="package-title">
                            Stranded   
                        </h3><!-- /.package-title -->
                        <div class="white-bg">
                            <p class="package-price light-blue">
                                <span class="pricing-currency">$</span>
                                <span class="pricing-amount">59</span>
                                <span class="pricing-duration">/month</span>
                            </p><!-- /.package-price -->
                            <div class="triangle-down1 price-margin"></div>
                            <ul class="pricing-table-txt">
                                <li><strong>10 GB</strong> Storage</li>
                                <li><strong>Free</strong> Live Support</li>
                                <li>Enhanced <strong>SSL</strong> Security</li>
                                <li><strong>Basic</strong> Customization</li>
                                <li>No Discount <strong>Codes</strong></li>
                            </ul><!-- /.pricing-table-txt -->
                        </div><!-- /.white-bg -->

                        <div class="order-now">
                            <span class="order-link"><a href="#">Sign up</a></span>
                        </div><!-- /.order-now -->
                        <div class="order-triangle1"></div>
                    </div><!-- /.pricing-table-1 -->
                </div><!-- /.col-xs-6  -->


                <div class="col-xs-6 col-md-4 col-lg-4 element-from-bottom">
                    <div class="pricing-table-2">
                        <h3 class="package-title">
                            Professional
                        </h3><!-- /.package-title -->
                        <div class="white-bg">
                            <p class="package-price light-red">
                                <span class="pricing-currency">$</span>
                                <span class="pricing-amount">79</span>
                                <span class="pricing-duration">/month</span>
                            </p><!-- /.package-price -->
                            <div class="triangle-down2 price-margin"></div>
                            <ul class="pricing-table-txt">
                                <li><strong>10 GB</strong> Storage</li>
                                <li><strong>Free</strong> Live Support</li>
                                <li>Enhanced <strong>SSL</strong> Security</li>
                                <li><strong>Basic</strong> Customization</li>
                                <li>No Discount <strong>Codes</strong></li>
                            </ul><!-- /.pricing-table-txt -->
                        </div><!-- /.white-bg -->
                        <div class="order-now">
                            <span class="order-link"><a href="#">Sign up</a></span>
                        </div><!-- /.order-now -->
                        <div class="order-triangle2"></div>
                    </div><!-- /.pricing-table-1 -->
                </div><!-- /.col-xs-6 -->


                <div class="col-xs-6 col-md-4 col-lg-4 element-from-right">
                    <div class="pricing-table-3">
                        <h3 class="package-title">
                            Ultimate  
                        </h3><!-- /.package-title -->
                        <div class="white-bg">
                            <p class="package-price light-blue">
                                <span class="pricing-currency">$</span>
                                <span class="pricing-amount">99</span>
                                <span class="pricing-duration">/month</span>
                            </p><!-- /.package-price -->
                            <div class="triangle-down3 price-margin"></div>
                            <ul class="pricing-table-txt">
                                <li><strong>10 GB</strong> Storage</li>
                                <li><strong>Free</strong> Live Support</li>
                                <li>Enhanced <strong>SSL</strong> Security</li>
                                <li><strong>Basic</strong> Customization</li>
                                <li>No Discount <strong>Codes</strong></li>
                            </ul><!-- /.pricing-table-txt -->
                        </div><!-- /.white-bg -->
                        <div class="order-now">
                            <span class="order-link"><a href="#">Sign up</a></span>
                        </div><!-- /.order-now -->
                        <div class="order-triangle3"></div>
                    </div><!-- /.pricing-table-1 -->
                </div><!-- /.col-xs-6  -->

            </div><!-- /.pricing-table -->
        </div> <!-- /.row -->
    </div><!-- /.container -->
</section><!-- /#pricing -->
<!-- Pricing Section End -->




<!-- Wouter Stokkel Section -->
<section id="wouter-stokkel-2" class="parallax-style">
    <div class="parallax-overlay">
        <div class="container text-center">
            <p>
                It’s art if can’t be explained. It’s fashion if no one asks for an explanation.
                It’s design if it doesn’t need explanation.
            </p>

            <p class="wouter-text"> -- <br> WOUTER STOKKEL</p>
        </div><!-- /.container -->
    </div><!-- /.parallax-overlay -->
</section><!-- /#wouter-stokkel -->
<!-- Wouter Stokkel Section End -->




<!-- Contact Section -->
<section id="contact" class="clearfix">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 element-from-top">
                <h2 class="section-title">Get in Touch</h2>
                <div class="section-title-bottom">
                    <span class="section-title-bottom-inner blue-border"></span>
                </div><!-- /.section-title-bottom -->
                <p class="section-description text-center">
                    Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                </p>
            </div><!-- /.col-lg-12 -->

            <div class="contact-form-container">
                <form id="contact-form" action="#" method="post" class="clearfix">
                    <div class="col-md-6 col-lg-6 element-from-left">
                        <input type="text"  class="form-control" id="ccr_name" name="ccr_name" required placeholder="Name">
                    </div>
                    <div class="col-md-6 col-lg-6 element-from-right">
                        <input type="email" class="form-control"  id="ccr_email" name="ccr_email" required placeholder="Email">
                    </div>
                    <div class="col-md-12 element-from-left">
                        <input type="text"  class="form-control" id="ccr_subject" name="ccr_subject" required placeholder="Subject">
                    </div>
                    <div class="col-md-12 element-from-left">
                        <textarea class="form-control" rows="5" id="ccr_message" name="ccr_message" required placeholder="Message"></textarea>
                    </div>
                    <div class="col-md-12 element-from-bottom">
                        <button class="btn custom-btn col-xs-12" type="submit" name="ccr_submit">SEND</button>
                    </div>
                </form><!-- /#contact-form -->
            </div><!-- /.contact-form-container -->
        </div><!-- /.row -->
    </div><!-- /.container -->


    <div id="contact-us">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="contact-info">
                        <address  class="contact-details">
                            <div class="col-md-3 col-sm-6 contact-info-box element-from-left">
                                <span class="icon"><span class="semi-small-hex-btn"><i class="fa fa-map-marker"></i></span></span>
                                <span class="texts">Inner Circular Road, Broker<br>
                                    Sector Rang Plaza, UK
                                </span>
                            </div> <!-- /.contact-info-box -->

                            <div class="col-md-3 col-sm-6 contact-info-box element-from-left">
                                <span class="icon"><span class="semi-small-hex-btn"><i class="fa fa-phone"></i></span></span>
                                <span class="texts">+123(00)-456789<br> +143(00)-456789</span>
                            </div><!--  /.contact-info-box -->

                            <div class="col-md-3 col-sm-6 contact-info-box element-from-right">
                                <span class="icon"><span class="semi-small-hex-btn"><i class="fa fa-envelope-o"></i></span></span>
                                <span class="texts">E-mail: contact@yoursite.com</span>
                            </div><!-- /.contact-info-box -->

                            <div class="col-md-3 col-sm-6 contact-info-box element-from-right">
                                <span class="icon"><span class="semi-small-hex-btn"><i class="fa fa-globe"></i></span></span>
                                <span class="texts">www.yoursite.com</span>
                            </div><!-- /.contact-info-box -->

                        </address> <!-- /.contact-details -->
                    </div><!-- /.contact-info -->
                </div><!--  /.col-sm-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /#contact-us -->
</section><!-- /#contact -->
<!-- Contact Section End -->




<!-- Map Section -->
<section id="map-section" class="section-gray-bg element-from-top clearfix">
    <div id="map">

    </div>
</section><!-- /#map-section -->
<!-- Map Section End -->




<!-- Footer Sidebar Section -->
<aside id="footer-sidebar">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-6 col-lg-3 element-from-left">
                <div class="sidebar-title">
                    <h3 class="title">
                        News Latter
                    </h3>
                </div><!-- /.sidebar-title -->
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, doloribus hic nam numquam quia!
                </p>
                <form class="news-later" action="#" method="post">
                    <input class="form-control" type="email" name="news_later_email" placeholder="Your email" required>
                    <button  type="submit" class="btn"><i class="fa fa-envelope"></i></button>
                </form><!-- /.news-later -->


                <div class="social-btn">
                    <a class="facebook-btn" href="#">
                        <span class="small-hex-btn">
                            <span><i class="fa fa-facebook"></i></span>
                        </span>
                    </a><!-- /.facebook-btn -->
                    <a class="twitter-btn" href="#">
                        <span class="small-hex-btn">
                            <span><i class="fa fa-twitter"></i></span>
                        </span>
                    </a><!-- /.twitter-btn -->
                    <a class="google-plus-btn" href="#">
                        <span class="small-hex-btn">
                            <span><i class="fa fa-google-plus"></i></span>
                        </span>
                    </a><!-- /.google-plus-btn -->
                    <a class="linkedin-btn" href="#">
                        <span class="small-hex-btn">
                            <span><i class="fa fa-linkedin"></i></span>
                        </span>
                    </a><!-- /.linkedin-btn -->
                </div> <!-- /. social-btn -->
            </div><!-- /.col-lg-3 -->

            <div class="col-xs-6 col-md-6 col-lg-3 element-from-left">
                <div class="sidebar-title">
                    <h3 class="title">
                        Recent Posts
                    </h3>
                </div><!-- /.sidebar-title -->

                <ul class="latest-post">
                    <li>
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/recent-posts/01.png" alt="avatar"> 
                        <a href="#">Morbi accumsan ipsum velit nam nec tellus</a><br>
                        <time class="post-meta-element" datetime="2014-03-29">29 March</time> | <a href="#">29 Comments</a>
                    </li>
                    <li>
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/recent-posts/01.png" alt="avatar"> 
                        <a href="#">Morbi accumsan ipsum velit nam nec tellus</a><br>
                        <time class="post-meta-element" datetime="2014-03-29">29 March</time> | <a href="#">29 Comments</a>
                    </li>
                    <li>
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/front/images/recent-posts/01.png" alt="avatar"> 
                        <a href="#">Morbi accumsan ipsum velit nam nec tellus</a><br>
                        <time class="post-meta-element" datetime="2014-03-29">29 March</time> | <a href="#">29 Comments</a>
                    </li>
                </ul><!-- /.latest-post -->
            </div><!-- /.col-lg-3 -->


            <div class="col-xs-6 col-md-6 col-lg-3 element-from-right">
                <div class="sidebar-title">
                    <h3 class="title">
                        Latest Tweet
                    </h3>
                </div><!-- /.sidebar-title -->

                <ul class="latest-tweet">
                    <li>
                        <span class="icon">
                            <i class="fa fa-twitter"></i>
                        </span>
                        <span class="texts">
                            <a href="#">@Mark:</a> We are going to lonce a new HTML Theme...<br>
                            29 Hours ago | <a href="#">Reply</a>
                        </span>
                    </li>
                    <li>
                        <span class="icon">
                            <i class="fa fa-twitter"></i>
                        </span>
                        <span class="texts">
                            <a href="#">@Mark:</a> We are going to lonce a new HTML Theme...<br>
                            29 Hours ago | <a href="#">Reply</a>
                        </span>
                    </li>
                </ul><!-- /.latest-tweet -->
            </div><!-- /.col-lg-3 -->

            <div class="col-xs-6 col-md-6 col-lg-3 element-from-right">
                <div class="sidebar-title">
                    <h3 class="title">
                        Flicker Images
                    </h3>
                </div><!-- /.sidebar-title -->

                <ul class="flicker-img">
                    <li class="flick-hex">		
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_1.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-1" class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="flick-hex">
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_2.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-2" class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="flick-hex">
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_3.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-3"  class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="flick-hex">
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_4.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-4"  class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="flick-hex">        
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_5.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-5"  class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="flick-hex">
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_6.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-6"  class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="flick-hex">
                        <div class="flick-hex1 flick-hex2">
                            <div class="flick-hex-in1">
                                <a href="<?php echo Yii::app()->request->baseUrl; ?>/front/images/flicker/flick_big_7.jpg" data-rel="prettyPhoto[flick_gal]">
                                    <div id="flicker-img-7"  class="flick-hex-in2"></div>
                                </a>
                            </div>
                        </div>
                    </li>     
                </ul> <!-- /.flicker-img -->
            </div><!-- /.col-lg-3 -->
        </div> <!-- /.row -->
    </div> <!-- /.container -->
</aside><!-- /#footer-sidebar -->
<!-- Footer Sidebar Section End -->

